<template>
  <div class="view-container">
    <div class="filter-container">

    </div>
    <div class="main-content" style="padding-top: 0">
      <div class="list-container">

        <div class="my-tabs-container">

          <div class="my-tabs">
            <el-tabs v-model="activeName" style="width:100%" @tab-click="handleClick">
              <el-tab-pane label="商业流向" name="business" />
              <el-tab-pane label="直发代理流向" name="straight" />
            </el-tabs>
            <el-button v-auth="{v:['crm:businessFlow:flowImport:create']}" class="main-btn" size="small" type="primary"
              @click="handlImportFlow">导入流向
            </el-button>
          </div>

        </div>

      </div>

      <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" label-width="100px"
        size="small" style="margin-top: 20px">
        <el-row :gutter="20" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="6" :xs="8">
            <el-form-item label="状态" style="width: 100%">
              <el-select v-model="queryParams.businessFlowStatus" clearable placeholder="状态" style="width: 100%">
                <el-option label="全部" value="" />
                <el-option label="草稿" value="0" />
                <el-option label="有效" value="2" />
                <el-option label="审核未通过" value="-1" />
                <el-option label=" 审核中" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item v-if="activeName === 'business'" label="配送商" style="width: 100%">
              <el-input v-model="queryParams.distributeName" clearable placeholder="配送商" />
            </el-form-item>
            <el-form-item v-else label="代理商" style="width: 100%">
              <el-input v-model="queryParams.agentName" clearable placeholder="代理商" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item label="导入时间" style="width: 100%">
              <date-range-picker v-model:date="value1" end-placeholder="结束日期" range-separator="至"
                start-placeholder="开始日期" type="daterange" @change="handlDate" />
            </el-form-item>
          </el-col>

          <el-col :lg="6" :xs="8">
            <el-form-item style="width: 100%">
              <div style="display: flex; justify-content: space-between">
                <div style="width: 210px;flex-shrink: 0">
                  <more-search-btn v-model:is-more="visible" />
                  <el-button class="border-btn" @click="handlReset">重置</el-button>
                  <el-button class="main-btn" type="primary" @click="handlSearch">搜索</el-button>
                </div>
                <div>
                  <table-cell-setting :checked="checkListData" :table-option="tableOption" @checkList="checkList" />
                </div>
              </div>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <template v-if="visible">
            <el-col :lg="6" :xs="8">
              <el-form-item label="关键字" style="width: 100%">
                <el-input v-model="queryParams.selectStr" clearable placeholder="输入流向记录编号关键字" />
              </el-form-item>
            </el-col>
            <el-col :lg="6" :xs="8">
              <el-form-item label="操作人">
                <el-select v-model="queryParams.creatorId" placeholder="请选择操作人">
                  <el-option v-for="item in creatorIdList" :key="item.id" :label="item.realName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="activeName === 'business'" :lg="6" :xs="8">
              <el-form-item label="终端价营销额">
                <div style="display: flex">
                  <el-input v-model.number="queryParams.terminalAmountStart" placeholder="最小金额" style="width: 45%" />
                  <div>--</div>
                  <el-input v-model.number="queryParams.terminalAmountEnd" placeholder="最大金额" style="width: 45%" />
                </div>
              </el-form-item>
            </el-col>
            <el-col v-if="activeName === 'business'" :lg="6" :xs="8">
              <el-form-item label="回款营销额">
                <div style="display: flex">
                  <el-input v-model.number="queryParams.returnAmountStart" placeholder="最小金额" style="width: 45%" />
                  <div>--</div>
                  <el-input v-model.number="queryParams.returnAmountEnd" placeholder="最大金额" style="width: 45%" />
                </div>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>

      <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
        @row-click="aloneClick">
        <el-table-column v-if="checkListData.indexOf('1') !== -1" :min-width="140" fixed="left" header-align="center"
          label="流向记录编号" prop="businessFlow.businessFlowNo" />

        <el-table-column v-if="checkListData.indexOf('2') !== -1 && activeName === 'business'" :min-width="180"
          :show-overflow-tooltip="true" fixed="left" header-align="center" label="配送商名称"
          prop="businessFlow.distributeName" />

        <el-table-column v-if="checkListData.indexOf('17') !== -1 && activeName === 'business'" :min-width="180"
          :show-overflow-tooltip="true" fixed="left">
          <template #header>
            <div style="display: flex;align-items: center;justify-content: center">
              总金额(元)
              <el-tooltip class="item" effect="dark" content="列表中的金额均为终端价扣除配送费后的回款销售金额" placement="top-start">
                <i class="iconfont icon-wenhao" style="padding-left: 5px;"></i>
              </el-tooltip>
            </div>

          </template>
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row?.businessFlow?.totalAmount) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column v-if="checkListData.indexOf('16') !== -1 && activeName === 'straight'" :min-width="180"
          :show-overflow-tooltip="true" fixed="left" header-align="center" label="代理商名称"
          prop="businessFlow.agentName" />

        <!-- <el-table-column v-if="checkListData.indexOf('3') !== -1  && activeName === 'business'" :min-width="140"
          align="center" fixed="left" label="回款营销额(元)" prop="returnAmount">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.returnAmount) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column v-if="checkListData.indexOf('4') !== -1  && activeName === 'business'" :min-width="140"
          align="center" label="终端价营销额(元)" prop="terminalAmount">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.terminalAmount) }}
            </div>
          </template>
        </el-table-column> -->

        <el-table-column v-if="checkListData.indexOf('5') !== -1  && activeName === 'business'" :min-width="140"
          align="center" label="渠道客户数量" prop="agentNum" />

        <el-table-column v-if="checkListData.indexOf('6') !== -1" :min-width="140" align="center" label="终端数量"
          prop="terminalNum" />

        <el-table-column v-if="checkListData.indexOf('7') !== -1  && activeName === 'business'" :min-width="140"
          align="center" label="代理金额(元)" prop="agentAmount">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.agentAmount  + row.agentPersonAmount) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column v-if="checkListData.indexOf('8') !== -1  && activeName === 'business'" :min-width="140"
          align="center" label="直销金额(元)" prop="directAmount">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.directAmount) }}
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column v-if="checkListData.indexOf('9') !== -1  && activeName === 'business'" :min-width="140"
          align="center" label="兼职大包金额(元)" prop="agentPersonAmount">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.agentPersonAmount) }}
            </div>
          </template>
        </el-table-column> -->

        <el-table-column v-if="checkListData.indexOf('10') !== -1 && activeName === 'business'" :min-width="140"
          align="center" label="第1终端金额(元)" prop="firstTerminal">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.firstTerminal) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column v-if="checkListData.indexOf('11') !== -1 && activeName === 'business'" :min-width="140"
          align="center" label="第2终端金额(元)" prop="secondTerminal">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.secondTerminal) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column v-if="checkListData.indexOf('12') !== -1 && activeName === 'business'" :min-width="140"
          align="center" label="第3终端金额(元)" prop="thirdTerminal">
          <template #default="{row}">
            <div style="text-align: right">
              {{ isInteger(row.thirdTerminal) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column v-if="checkListData.indexOf('10') !== -1 && activeName === 'straight'" :min-width="140"
          align="center" label="第1终端数量" prop="firstTerminalSum" />

        <el-table-column v-if="checkListData.indexOf('11') !== -1 && activeName === 'straight'" :min-width="140"
          align="center" label="第2终端数量" prop="secondTerminalSum" />

        <el-table-column v-if="checkListData.indexOf('12') !== -1 && activeName === 'straight'" :min-width="140"
          align="center" label="第3终端数量" prop="thirdTerminalSum" />

        <el-table-column v-if="checkListData.indexOf('13') !== -1" align="center" label="导入时间" min-width="180px">
          <template #default="{row}">
            {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.businessFlow.createdAt) }}
          </template>
        </el-table-column>

        <el-table-column v-if="checkListData.indexOf('14') !== -1" align="center" label="操作人" min-width="140px"
          prop="businessFlow.creatorName" />

        <el-table-column v-if="checkListData.indexOf('15') !== -1" align="center" fixed="right" label="状态"
          min-width="140px">
          <template #default="{row}">
            <div v-if="row.businessFlow.flowStatus!=='DOING'" style="line-height: 20px">
              <!-- <span v-if="row.businessFlow.businessFlowStatus === '-1'">审核未通过</span> -->
              <span v-if="row.businessFlow.businessFlowStatus === '0'">草稿</span>

              <span v-if="row.businessFlow.businessFlowStatus === '2'">有效</span>
            </div>
            <div v-if="row.businessFlow.flowStatus!=='AGREE' && row.businessFlow.flowStatus!=='REPEAL' "
              style="line-height: 20px">
              {{ getLabel('approval_result', row.businessFlow.flowStatus) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" header-align="center" label="操作" width="160">
          <template #default="{row}">
            <el-button v-auth="{v:['crm:businessFlow:flowImport:editor'],
                bool:(row.businessFlow.flowStatus ==='REFUSE' || row.businessFlow.flowStatus ==='REPEAL' || 
                row.businessFlow.flowStatus ==='REJECT_INITIATOR'
                  || row.businessFlow.flowStatus ==='REJECT' || row.businessFlow.businessFlowStatus === '0' )
                  && row.businessFlow.flowStatus !== 'DOING'}" type="text" @click="handlEdit(row.businessFlow.id)">编辑
            </el-button>

            <el-button v-auth="{v:['crm:businessFlow:flowImport:delete'],
                bool:(row.businessFlow.flowStatus ==='REFUSE' || row.businessFlow.flowStatus ==='REPEAL' ||
                row.businessFlow.flowStatus ==='REJECT_INITIATOR'
                  || row.businessFlow.flowStatus ==='REJECT' || row.businessFlow.businessFlowStatus === '0' )
                  && row.businessFlow.flowStatus !== 'DOING'}" style="color: red" type="text"
              @click="handlDele(row.businessFlow.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </table-view>

      <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page" :total="total"
        style="display: flex; justify-content: flex-end" @pagination="handlList" />

    </div>

  </div>
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "Index",
  setup() {
    const api = inject("api");
    const router = useRouter();
    // 搜索对象
    var data = reactive({
      value1: "",
      queryParams: {
        businessFlowStatus: "",
        distributeName: "",
        startTime: null,
        endTime: null,
        creatorId: "",
        terminalAmountStart: undefined,
        terminalAmountEnd: undefined,
        returnAmountStart: undefined,
        returnAmountEnd: undefined,
        pageSize: 20,
        page: 1,
        businessFlowType: "1",
        agentName: "",
        selectStr: "",
      },
      tableData: [],
      total: 0,
      tableOption: [
        { key: "1", value: "流向记录编号" },
        { key: "2", value: "配送商名称" },
        // { key: "3", value: "回款营销额" },
        // { key: "4", value: "终端价营销额" },
        { key: "5", value: "渠道客户数量" },
        { key: "6", value: "终端数量" },
        { key: "7", value: "代理金额" },
        { key: "8", value: "直销金额" },
        // { key: "9", value: "兼职大包金额" },
        { key: "10", value: "第1终端金额" },
        { key: "11", value: "第2终端金额" },
        { key: "12", value: "第3终端金额" },
        { key: "13", value: "导入时间" },
        { key: "14", value: "操作人" },
        { key: "15", value: "状态" },
        { key: "16", value: "代理商名称" },
        { key: "17", value: "总金额(元)" },
      ],
      checkListData: [
        "1",
        "2",
        // "3",
        // "4",
        "5",
        "6",
        "7",
        "8",
        // "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
      ],
      visible: false,
      creatorIdList: [],
      activeName: "business",
    });

    const checkList = (checked) => {
      data.checkListData = checked;
    };

    // 获取负责人
    const handlCreatorIdList = () => {
      api.terminal.HEAD_PEOPLE(1).then((res) => {
        if (res.code === 0) {
          data.creatorIdList = res.data;
        }
      });
    };

    const currentInstance = getCurrentInstance();

    const handlDate = (val) => {
      if (val) {
        data.queryParams.startTime = val[0];
        data.queryParams.endTime = val[1];
      }
    };

    const formValue = (val) => {
      data.queryParams.creatorId = val.creatorId;
      data.queryParams.terminalAmountStart = Number(val.terminalAmountStart);
      data.queryParams.terminalAmountEnd = Number(val.terminalAmountEnd);
    };

    // 导入流向
    const handlImportFlow = () => {
      if (data.activeName === "business") {
        router.push({
          path: "/businessFlow/flowImport/create",
          query: { type: "1" },
        });
      }
      if (data.activeName === "straight") {
        router.push({
          path: "/businessFlow/flowImport/straightCreate",
          query: { type: "2" },
        });
      }
    };

    const handleClick = (val) => {
      console.log(val);
      data.activeName = val?.props?.name;
      if (data.activeName === "business") {
        data.queryParams.businessFlowType = "1";
      }
      if (data.activeName === "straight") {
        data.queryParams.businessFlowType = "2";
      }
      handlList();
    };

    // 获取列表
    const handlList = () => {
      api.businessFlow.TBUSINESSFLOW_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    // 重置
    const handlReset = () => {
      if (data.activeName === "business") {
        data.queryParams = {
          businessFlowStatus: "",
          distributeName: "",
          startTime: null,
          endTime: null,
          creatorId: "",
          terminalAmountStart: undefined,
          terminalAmountEnd: undefined,
          returnAmountStart: undefined,
          returnAmountEnd: undefined,
          pageSize: 20,
          page: 1,
          businessFlowType: "1",
          agentName: "",
          selectStr: "",
        };
      }
      if (data.activeName === "straight") {
        data.queryParams = {
          agentName: "",
          businessFlowStatus: "",
          businessFlowType: "2",
          creatorId: "",
          distributeName: "",
          endTime: null,
          page: 1,
          pageSize: 20,
          selectStr: "",
          startTime: null,
        };
      }

      data.value1 = "";
      handlList();
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作") return;
      router.push({
        name: "businessFlowDetails",
        query: {
          id: row.businessFlow.id,
          type: data.queryParams.businessFlowType,
        },
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    // 编辑
    const handlEdit = (id) => {
      if (data.activeName === "business") {
        router.push({
          path: "/businessFlow/flowImport/create",
          query: { id: id, type: "1" },
        });
      }
      if (data.activeName === "straight") {
        router.push({
          path: "/businessFlow/flowImport/straightCreate",
          query: { id: id, type: "2" },
        });
      }
    };

    // 删除
    const handlDele = (id) => {
      currentInstance.proxy
        .alertBox({
          message: "删除数据后不可恢复,确定删除？",
        })
        .then(() => {
          api.businessFlow.TBUSINESSFLOW_DELETE(id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            } else {
              handlList();
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    onMounted((_) => {
      handlList();
      handlCreatorIdList();
    });

    return {
      ...toRefs(data),
      handlImportFlow,
      handlList,
      handlSearch,
      handlReset,
      aloneClick,
      cellStyle,
      handlDate,
      formValue,
      handlEdit,
      handlDele,
      checkList,
      handlCreatorIdList,
      handleClick,
    };
  },
};
</script>

<style scoped>
</style>
